<template>
	<view class="login_box">
		<TopBar :isBack="false"></TopBar>
		<view class="login_logo">
			<image src="../../static/images/logo.png" mode="widthFix"></image>
		</view>
		<view class="bottom">
			<view class="login-way">
				<view class="phone-login" @click="handleLogin">手机登录</view>
				<view class="scan-code">扫码登录</view>
			</view>
			<view class="again">
				<checkbox-group @change="handleSel">
					<label class="label">
						<checkbox v-model="isChecked" /><text>同意</text>
					</label>
				</checkbox-group>
				<view>服务条款,隐私政策</view>
			</view>
		</view>
		<navigator url="/pages/index/index" class="cancel-login" open-type="switchTab" hover-class="other-navigator-hover">立即体验</navigator>
	</view>
</template>

<script>
	import TopBar from '../../components/TopBar.vue'
	export default {
		data() {
			return {
				// 用户是否同意了登录条件
				isChecked: '0'
			}
		},
		components: { TopBar },
		methods: {
			// 多选框选中状态发生改变时触发
			handleSel(e) {
				// 得到标识
				const isChecked = e.detail.value[0]
				if (isChecked === '0') return this.isChecked = '1'
				this.isChecked = '0'
			},
			// 点击登录按钮时触发
			handleLogin() {
				if (this.isChecked === '0') {
					return uni.showToast({
						title: '请先勾选同意',
						duration: 1000,
						icon: 'none'
					}); 
				} 
				uni.navigateTo({
					url: '/pages/login/phone'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login_box {
		width: 100%;
		height: 100%;
		background-color: $uni-color-theme;
		position: relative;
		// 用户不登录直接体验
		.cancel-login {
			position: absolute;
			right: 30rpx;
			top: 20rpx;
			color: white;
			font-size: 28rpx;
			text-decoration: underline;
			&.other-navigator-hover {
				font-weight: bold;
			}
		}
		.login_logo {
			position: absolute;
			left: 50%;
			top: 20%;
			transform: translateX(-50%);
			image {
				width: 130rpx;
			}
		}
		.bottom {
			position: absolute;
			bottom: 20rpx;
			left: 50%;
			transform: translateX(-50%);
			.login-way {
				text-align: center;
				line-height: 90rpx;
				.phone-login, .scan-code {
					margin-bottom: 20rpx;
					border-radius: 45rpx;
				}
				.phone-login {
					background-color: #FFFFFF;
				}
				.scan-code {
					background-color: rgba(0, 0, 0, 0.1);
					color: white;
				}
			}
			.again {
				display: flex;
				align-items: center;
				color: white;
				.label {
					display: flex;
					align-items: center;
					transform: translateY(3rpx);
				}
				checkbox {
					transform: scale(.5);
					color: #C8C7CC;
				}
				font-size: 28rpx;
				text {
					color: #C8C7CC;
					margin-right: 5rpx;
				}
			}
		}
	}
</style>
